import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';
import store from '../../redux/store';
import { addAction, subAction, asyncAddAction, asyncSubAction } from './../../redux/Reducer/countReducer.js';
import { addlikesAction, sublikesAction, asyncAddlikesAction, asyncSublikesAction } from './../../redux/Reducer/likeReducer'

function Redux(props) {
    let [count, setCount] = useState();

    // 将数据从store中解构出来
    let { num, like } = store.getState();

    useEffect(() => {
        store.subscribe(() => {
            setCount(store.getState());
        })

    }, []);

    // useEffect(() => {

    // }, [store.getState()])

    return (
        <div>
            <p>
                redux的值是：{store.getState().num}
            </p>
            <button onClick={() => {
                store.dispatch(addAction(1));
            }}>+1</button>
            <button onClick={() => {
                store.dispatch(subAction(2));
            }}>-2</button>
            <button onClick={() => {
                store.dispatch(asyncAddAction(5));
            }}>异步+5</button>
            <button onClick={() => {
                store.dispatch(asyncSubAction(6));
            }}>异步-6</button>

            <hr />
            {/* 点赞 */}
            <p>
                点赞量：{like}
            </p>
            <button onClick={() => {
                store.dispatch(addlikesAction(1))
            }}>同步+1</button>
            <button onClick={() => {
                store.dispatch(sublikesAction(2))
            }}>同步-2</button>
            <button onClick={() => {
                store.dispatch(asyncAddlikesAction(3))
            }}>异步+3</button>
            <button onClick={() => {
                store.dispatch(asyncSublikesAction(4))
            }}>异步-4</button>
        </div>
    );
}

export default Redux;